{% extends "base.html" %}

{% block head %}
<title>index page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  #allmap {
    width: 800px;
    height: 600px;
    overflow: hidden;
    margin: 0;
    font-family: "微软雅黑";
  }
</style>
<script type="text/javascript"
  src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=blQBF83Q9DcTiqCAGGsPfy2T8hCXiRBP"></script>
{% endblock %}

{% block navbar %}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand">RateMap</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav"
    aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="{{url_for('index')}}">主页</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="{{url_for('surround')}}">周边推荐</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{{url_for('user_analysis')}}">用户分析</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{{url_for('shop_analysis')}}">店铺分析</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{{url_for('area_analysis')}}">区域分析</a>
      </li>
    </ul>
  </div>
</nav>
{% endblock %}

{% block content %}
<div id="allmap"></div>
<script type="text/javascript">
  // GL版命名空间为BMapGL
  // 按住鼠标右键，修改倾斜角和角度
  var map = new BMapGL.Map("allmap");    // 创建Map实例
  map.centerAndZoom(new BMapGL.Point(-80, 40), 10);  // 初始化地图,设置中心点坐标和地图级别
  map.enableScrollWheelZoom(true);

  var shops = JSON.parse('{{ shops_dict | tojson | safe }}');
  console.log(shops)
  var i;
  var points = [];
  for (i = 0; i < shops.length; i++) {
    (function (x) {
      console.log(shops[i].longitude + ', ' + shops[i].latitude);
      //创建标注
      var pt = new BMapGL.Point(shops[i].longitude, shops[i].latitude);
      points[i] = pt;
      var marker = new BMapGL.Marker(pt);
      map.addOverlay(marker);
      var label = new BMapGL.Label(shops[i].name, { offset: new BMapGL.Size(30, -10) });
      marker.setLabel(label);
      label.setStyle({
        color: "Black",
        fontSize: "14px",
        border: "0"
      });
      //创建信息窗口
      var opts = {
        width: 200,     // 信息窗口宽度
        height: 100,     // 信息窗口高度
        title: shops[i].name, // 信息窗口标题
        message: "评分: " + shops[i].stars
      }
      var showInfo = "地址：" + shops[i].address + "<br/>" + "评分: " + shops[i].stars + "<br/>" + "店铺类型: " + shops[i].categories;
      var infoWindow = new BMapGL.InfoWindow(showInfo, opts);  // 创建信息窗口对象
      marker.addEventListener("click", function (e) {
        marker.openInfoWindow(infoWindow, pt); //开启信息窗口
      });
      map.addOverlay(marker);
    })();
  }

</script>

{% endblock %}